<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 三元运算符 -->
			<div>
				性别：<span>{{gender == 0 ? '男' : '女'}}</span>
			</div>
			<!-- 函数 -->
			<div>
				单价：<span>{{price}}</span>
				数量：<span>{{count}}</span>
				金额：<span>{{Math.round(price * count)}}</span>
			</div>
			<div>
				{{msg.split('.').reverse().join('*')}}
			</div>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#root',
				data: {
					gender: 0,
					count: 5,
					price: 20,
					msg: 'Hello.Vue'
				}
			})
		</script>
	</body>
</html>